<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box {
        display: grid;
        width: 500px;
        height: 500px;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(3,0.25fr) auto;
    }
    .div{
        font-size: 40px;
        color: white;
    }
    .top1{
        /* font-size: 50px; */
        grid-area: 1/1/2/7;
        background-color: red;
    }
    .top2{
        grid-area: 1/7/2/13;
        background-color: green;
    }
    .center1{
        grid-area: 2/1/3/5;
        background-color: lightcoral;
    }
    .center2{
        grid-area: 2/5/3/9;
        background-color: orange;
    }
    .center3{
        grid-area: 2/9/3/13;
        background-color: royalblue;
    }
    .center4{
        grid-area: 3/1/4/4;
        background-color: slateblue;
    }
    .center5{
        grid-area: 3/4/4/7;
        background-color: turquoise;
    }
    .center6{
        grid-area: 3/7/4/10;
        background-color: brown;
    }
    .center7{
        grid-area: 3/10/4/13;
        background-color: chocolate;
    }
    .bottom1{
        grid-area: 4/1/5/7;
        background-color: pink;
    }
    .bottom2{
        grid-area: 4/7/5/13;
        background-color: lightslategray;
    }
</style>

<body>
    <div id="box">
        <div class="div top1">50%</div>
        <div class="div top2">50%</div>
        <div class="div center1">33%</div>
        <div class="div center2">33%</div>
        <div class="div center3">33%</div>
        <div class="div center4">25%</div>
        <div class="div center5">25%</div>
        <div class="div center6">25%</div>
        <div class="div center7">25%</div>
        <div class="div bottom1">50%</div>
        <div class="div bottom2">50%</div>
    </div>
</body>

</html>